<!--
 * @Author: 小陆同学 1361176289@qq.com
 * @Date: 2024-05-11 09:12:15
 * @LastEditors: 小陆同学 1361176289@qq.com
 * @LastEditTime: 2024-06-28 11:07:54
 * @FilePath: \hehe-h5\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div id="app">
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive" />
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive" />
		<div class="tab-bottom" v-if="!$route.meta.tabHidden">
			<van-tabbar route active-color="#50b1c2" inactive-color="#999">
				<van-tabbar-item replace placeholder :to="item.path" v-for="(item, index) in tabbar" :key="index">
					<span>{{ item.name }}</span>
					<template #icon="props">
						<img :src="props.active ? item.active : item.inactive" />
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				cachedComponents: ["approvalList", "submitList"],
				tabbar: [
					{
						name: "首页",
						path: "/index",
						active: require("@/assets/images/menu_5.png"),
						inactive: require("@/assets/images/menu_5_a.png"),
					},
					{
						name: "入账申请",
						path: "/entry",
						active: require("@/assets/images/menu_2_a.png"),
						inactive: require("@/assets/images/menu_2.png"),
					},
					{
						name: "出账申请",
						path: "/outgoing",
						active: require("@/assets/images/menu_3_a.png"),
						inactive: require("@/assets/images/menu_3.png"),
					},
					{
						name: "我审批的",
						path: "/approvalList",
						active: require("@/assets/images/menu_4_a.png"),
						inactive: require("@/assets/images/menu_4.png"),
					},
					{
						name: "我提交的",
						path: "/submitList",
						active: require("@/assets/images/menu_1_a.png"),
						inactive: require("@/assets/images/menu_1.png"),
					},
				],
			};
		},
	};
</script>

<style lang="scss">
	// #nprogress .bar {
	//   background: red !important; //自定义颜色
	// }
	// .van-nav-bar .van-icon {
	//   color: #666 !important;
	// }
	.tab-bottom {
		.van-popover__action {
			width: 135px !important;
			color: #104558;
			font-size: 12px;
		}

		.text {
			color: #999;

			&.active {
				color: #104558;
			}
		}
	}
</style>
